@extends('public.main')
@section('title')
    {{ strip_tags($article->title) }}
@endsection

@section('css')
    <meta name="keywords" content="{{ $article->keywords }}"/>
    <meta name="description" content="{{ $article->description }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('/static/css/detail.css') }}">
@endsection

@section('content')
    <div class="col-sm-12 col-xs-12">
        <div class="col-sm-12 col-xs-12 content_left" style="margin:0px;padding:0px;">
            <div class="col-sm-12 col-xs-12 item_article" style="margin:0px;padding:0px;padding:5px;">
                <div class="col-sm-12 col-xs-12" style="margin:0;padding:0; ">
                    <h3>
                        {!! $article->title !!}
                    </h3>
                </div>
                <div class="col-sm-12 col-xs-12 item_content">
                    {!! $article->content !!}
                </div>
                <div id="article_id" style="display:none;">{{ $article->id }}</div>
                @if(Session::get('user')!=null)
                    <div id="user_id" style="display:none;">{{ Session::get('user')->id }}</div>
                @endif

                <div class="col-sm-12 col-xs-12 detail_button">
                    @if( $before == null )
                        <a role="button" class="col-sm-3 col-xs-3 btn btn-default disabled"
                           href="/storyDetail/{{ $before }}.html">上一条</a>
                    @else
                        <a role="button" class="col-sm-3 col-xs-3 btn btn-default"
                           href="/storyDetail/{{ $before }}.html">上一条</a>
                    @endif

                    @if( $next == null )
                        <a role="button"
                           class="col-sm-6 col-xs-4 col-xs-offset-1 col-sm-offset-1 btn btn-default disabled"
                           style="background:black;color:white;" href="/storyDetail/{{ $next }}.html">下一条</a>
                    @else
                        <a role="button" class="col-sm-6 col-xs-4 col-xs-offset-1 col-sm-offset-1 btn btn-default"
                           style="background:black;color:white;" href="/storyDetail/{{ $next }}.html">下一条</a>
                    @endif
                    <button type="button" class="col-sm-3 col-xs-3 col-xs-offset-1 col-sm-offset-1 btn btn-default"
                            style="">收藏
                    </button>
                </div>
                <div class="col-sm-12 col-xs-12 item_praise">
                    <div class="praise_first">
                        {{ $article->praise }} 好笑
                    </div>
                    <div class="praise_point">
                        ·
                    </div>
                    <div class="praise_second">
                        <a href="#" style="color:#999999" id="comment_num">107 评论</a>
                    </div>
                </div>
                <div class="col-sm-12 col-xs-12 item_img">
                    <div style="float:left;">
                        <a href="#"><img src="{{ asset('/static/img/good.png') }}" style="width:20px;height:20px;"/></a>
                        <a href="#"><img src="{{ asset('/static/img/bad.png') }}"
                                         style="width:20px;height:20px;margin-left:20px;"/></a>
                        <a href="#"><img src="{{ asset('/static/img/comments.png') }}"
                                         style="width:20px;height:20px;margin-left:20px;"/></a>
                    </div>
                    <div style="float:right;">
                        <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#"
                                                                                                          class="bds_qzone"
                                                                                                          data-cmd="qzone"
                                                                                                          title="分享到QQ空间"></a><a
                                    href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#"
                                                                                                       class="bds_weixin"
                                                                                                       data-cmd="weixin"
                                                                                                       title="分享到微信"></a>
                        </div>
                        <script>window._bd_share_config = {
                                "common": {
                                    "bdSnsKey": {
                                        "tsina": "4056993719",
                                        "tqq": "101212621"
                                    },
                                    "bdText": "",
                                    "bdMini": "2",
                                    "bdMiniList": false,
                                    "bdPic": "",
                                    "bdStyle": "0",
                                    "bdSize": "24"
                                },
                                "share": {},
                                "image": {
                                    "viewList": ["qzone", "tsina", "weixin"],
                                    "viewText": "分享到：",
                                    "viewSize": "24"
                                },
                                "selectShare": {
                                    "bdContainerClass": null,
                                    "bdSelectMiniList": ["qzone", "tsina", "weixin"]
                                }
                            };
                            with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];</script>
                    </div>
                </div>
                <div class="col-sm-12 col-xs-12">
                    <script type="text/javascript">
                        document.write('<a style="display:none!important" id="tanx-a-mm_56967596_36728993_131770358"></a>');
                        tanx_s = document.createElement("script");
                        tanx_s.type = "text/javascript";
                        tanx_s.charset = "gbk";
                        tanx_s.id = "tanx-s-mm_56967596_36728993_131770358";
                        tanx_s.async = true;
                        tanx_s.src = "http://p.tanx.com/ex?i=mm_56967596_36728993_131770358";
                        tanx_h = document.getElementsByTagName("head")[0];
                        if (tanx_h) tanx_h.insertBefore(tanx_s, tanx_h.firstChild);
                    </script>
                </div>
            </div>
        </div>

        {{--进行评论--}}
        @if(Session::get('user')!=null)
            <div class="col-sm-12 col-xs-12" style="margin:0px;padding:0px;margin-top:20px;">
                <div class="col-sm-12 col-xs-12 doComment" style="margin:0px;padding:0px;">
                    <div class="col-sm-12 col-xs-12">
                        <textarea class="form-control" rows="2" style="margin-top:20px;" id="text_area"
                                  placeholder="写点什么。。"></textarea>
                    </div>
                    <div class="col-sm-12 col-xs-12" style="padding:0px;margin:0px;margin-top:10px;">
                        <div style="float:left;margin-top:5px;margin-left:10px;">还剩余<span id="remaining_word">200</span>个字符
                        </div>
                        <div style="float:right;margin-right:10px;">
                            <button type="button" class="btn btn-success" onclick="pushComment()">评论</button>
                        </div>
                    </div>
                </div>
            </div>
        @endif
        @if(Session::get('user')==null)
            <div class="col-sm-12 col-xs-12" style="margin:0px;padding:0px;margin-top:20px;">
                <div class="col-sm-12 col-xs-12 doComment"
                     style="margin:0px;padding:0px;height:50px;padding-left:10px;">
                    <div class="col-sm-12 col-xs-12" style="padding:0px;margin:0px;margin-top:10px;">
                        <div style="float:left;margin-top:5px;">请<a data-toggle="modal" href="#" data-target="#myModal">登录</a>后再进行评论
                        </div>
                    </div>
                </div>
            </div>
        @endif
        {{--评论--}}
        <div class="col-sm-12 col-xs-12 content_left" style="margin:0px;padding:0px;margin-top:20px;">
            <div class="col-sm-12 col-xs-12 comment"
                 style="margin:0px;padding:0px;margin-bottom:20px;padding-left:10px;">
                <h4>评论</h4>
                @foreach( $article_comments as $article_comment )
                    <div>
                        <hr style="width:98%;border:1px solid #e7e5e2;margin:0;"/>
                        <div class="col-sm-12 col-xs-12" style="margin-top:10px;margin-bottom:10px;">
                            <div class="col-sm-2 col-xs-2" style="margin:0px;padding:0px;">
                                <img src="{{ $article_comment->avatar }}" class="img-circle"
                                     style="width:40px;height:40px;"/>
                            </div>
                            <div class="col-sm-10 col-xs-10" style="margin:0px;padding:0px;">
                                <div class="col-sm-12 col-xs-12 comment_name" style="margin:0px;padding:0px;">
                                    {{ $article_comment->name }}
                                </div>
                                <div class="col-sm-12 col-xs-12" style="margin:0px;padding:0px;">
                                    {{ $article_comment->content }}
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
        {{--<div class="col-md-4">
            <div class="col-md-12 content_right">
                <div class="col-md-12">
                    <h4>快来扫一扫微信二维码，更多精彩内容等你来发现。</h4>
                    <img src="http://7xj8tq.com1.z0.glb.clouddn.com/erweima1.jpg">
                </div>
            </div>
        </div>--}}
    </div>
@endsection

@section('script')
    <script>

        $("#text_area").on("input propertychange", function () {
            var $this = $(this),
                _val = $this.val(),
                count = "";
            if (_val.length > 150) {
                $this.val(_val.substring(0, 150));
            }
            count = 150 - $this.val().length;
            $('#remaining_word').text(count);
        });

        function pushComment() {
            var txt = $('#text_area').val();
            var articleId = $('#article_id').text();
            var userId = $('#user_id').text();
            //alert(txt);
            $.post('/doComment', {
                "content": txt,
                "articleId": articleId,
                "userId": userId,
                "type": 0
            }, function (data) {
                alert("评论成功!");
                $("#text_area").val("");
                location.reload();
            });
        }
    </script>
@endsection